<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>  
	body, html {  
		height: 100%;  
		margin: 0;
		background-image: url("{{ url_for('static', filename='img/login.jpg') }}");
		background-size: cover;
		background-position: center;  
		background-repeat: no-repeat;  
	}  
	  
	.container {  
		display: flex;  
		justify-content: center; /* 水平居中 */  
		align-items: center; /* 垂直居中 */  
		height: 100%;  
		padding: 20px;  
		box-sizing: border-box;  
	}  
	  
	/* 如果需要给表单一个半透明的背景，可以创建一个新的类来应用给表单的容器 */  
	.form-container {
		width: 40%;
		background-color: rgba(255, 255, 255, 0.8); /* 白色背景，带半透明效果 */  
		padding: 20px; /* 根据需要调整内边距 */  
		border-radius: 5px; /* 可选：添加圆角 */  
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 可选：添加阴影以增强立体感 */
		display: flex;  
		justify-content: center; /* 水平居中 */  
		align-items: center; /* 垂直居中 */  
		height:400px; /* 或任何具体高度，以确保有足够的空间来居中 */
	}
		
    .form-group {  
        margin-bottom: 20px; /* 每个表单项下方的外边距为20px */  
    }  
  
    .form-group input,.form-group select {  
        padding: 10px; /* 表单元素的内边距 */  
        width: 100%;  
        box-sizing: border-box; /* 确保宽度包含内边距 */  
    }  
  
    .links {  
        display: flex;  
        justify-content: space-between; /* 两端对齐 */  
        align-items: center;  
        margin-bottom: 20px; /* 与下方元素之间的外边距为20px */  
    }  
  
    .links a {  
        color: #007BFF;  
        text-decoration: none;  
    }  
  
    form {  
        width: 100%;  
        max-width: 300px;  
    }  
  
    button[type="submit"] {  
        padding: 10px; /* 按钮的内边距 */  
        width: 100%;  
        box-sizing: border-box; /* 确保宽度包含内边距 */  
        margin-bottom: 20px; /* 按钮下方的外边距为20px */	
		background-color: #4CAF50
    }
	
	button[type="submit"]:hover {
	    background-color: #45a049;  
	}
</style>  
</head>  
<body>  
<div class="container"> 
	<div class="form-container">
		<div class="form-all">
		<h2>欢迎登录酒店客房推荐系统</h2>  
		<form id="loginForm">  

			<div class="form-group">  
				<label for="username">账号:</label>  
				<input type="text" id="username" name="username" placeholder="请输入用户名,邮箱或手机号" required>
			</div>  
			<div class="form-group">  
				<label for="password">密码:</label>  
				<input type="password" id="password" name="password" placeholder="请输入密码" required>  
			</div>  
			<div class="links">  
				<a href="/user/registerPage" class="register-link">注册账号</a>
				<br>  
				<a href="/user/changePassPage" class="forgot-password-link">忘记密码</a>
			</div>
			<button type="submit">登录</button>
            <div class="links">
                <button type="button" onclick="getSession()">获得session</button>
                <button type="button" onclick="removeSession()">注销</button>
            </div>
		</form>
		</div>
	</div> 
</div>  
<script>  
    document.getElementById('loginForm').addEventListener('submit', function(event) {  
        // 阻止表单的默认提交行为  
        event.preventDefault();  

        // 获取表单数据
        var formData = new FormData(this);

		// 将数据转换为JSON格式
		const data = JSON.stringify({
			'username': formData.get('username'),
			'password': formData.get('password')
		});

        loginUser(data)
        // 这里可以添加异步请求，向后端发送登录请求  
        // 例如使用fetch或者axios发送POST请求
        function loginUser(data) {
            $.ajax({
			url: '/user/login',
			data: data,
			contentType: 'application/json',
			dataType: 'json',
			method: 'POST',
			success: function (res) {
				console.log(res)
                sessionStorage.setItem("user", JSON.stringify(res.data))
                let user = JSON.parse(sessionStorage.getItem("user"))
                console.log(user)
                alert(res.msg)
			},
			error: function () {
				alert("异常!")
			}
		})
        }

    });

    // 注销
    function removeSession() {
        let user = JSON.parse(sessionStorage.getItem("user"))
        if (user != null) {
            sessionStorage.removeItem("user")
            console.log("注销成功!")
        } else {
            alert("尚未登录!")
            window.location.href = '/user/loginPage'
        }
    }

    // 获得session会话
    function getSession() {
        let user = JSON.parse(sessionStorage.getItem("user"))
        console.log(user)
    }
</script>  
  
</body>  
</html>